<template>
	<view class="container">
		<view class="department">
			<view class="department_img">
				<image :src="doctorInfo.img" mode=""></image>
			</view>
			<view class="department_info">
				<view class="department_name">
					<uni-tag type="primary" inverted :text="doctorInfo.doctorName"></uni-tag>
					<uni-tag type="primary" inverted :text="doctorInfo.levels"></uni-tag>
				</view>
				<view class="department_detail">
					{{doctorInfo.descption}}
				</view>
				<view class="department_price">
					挂号费：￥{{registrationFee}}
				</view>
			</view>
		</view>
		<view class="pick_date">
			请选择日期
		</view>
		<view class="date">
			<view @click="dateClick(item,index)" class="date_text" :class="{active:index===currentIndex}"
				v-for="(item,index) in Rdate">{{item}}</view>
		</view>
		<view class="pick_date">
			请选择时间段
		</view>
		<view class="time" v-show="time.length">
			<view class="time_text" v-for="(item,index) in time">{{item.time}}</view>
		</view>
		<view class="rList">
			<view @click="isSelect(item,index)"
				:class="[item=='已约满'?'red':'',item=='已预约'?'green':'',item=='可预约'?'hui':'',]"
				v-for="(item,index) in isRegisted">
				{{item}}
			</view>
		</view>
		<view class="registerd_submit" @click="handleToOrder">
			提交
		</view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	export default {
		data() {
			return {
				date: ['周一', '周二', '周三', '周四', '周五'],
				time: [],
				currentIndex: 0,
				docotorId: '',
				doctorDetail: [],
				doctorInfo: {
					doctorName: '',
					levels: ''
				},
				Rdate: [],
				isRegisted: [],
				confirmToken: '',
				registrationFee: '',
				registerId: '',
				currentDate: '',
				currentTime: ''
			}
		},
		onLoad(res) {
			this.docotorId = res.doctorId
			this.getDetailTime()
			this.getUserRegisted()
			this.doctorInfo = uni.getStorageSync('doctor')
			this.registrationFee = uni.getStorageSync('registrationFee')
		},
		created() {
			// this.getDetailTime()
			// this.getUserRegisted()
		},
		computed: {
			...mapGetters('m_user', ['userTime'])
		},
		onShow() {
			this.currentIndex = 0
		},
		methods: {
			// 获取令牌
			handleToOrder() {
				// if (!this.isRegisted.includes('已预约')) {
				// 	return;
				// }
				let confirmToken = '';
				uni.$http.get('/order-server/api/order/v1/get_token').then(res => {
					if (res.data.code === 200) {
						// console.log(res)
						confirmToken = res.data.data
						return Promise.resolve(confirmToken)
					}
				}).then(res => {
					this.commitResgisted(res)
				})
			},
			// 提交预约
			commitResgisted(confirmToken) {
				uni.$http.post('/order-server/api/order/v1/confirm', {
					"pay_type": "ALIPAY",
					"client_type": "PC",
					"date": this.currentDate,
					"time": this.currentTime,
					"registerId": this.registerId,
					"order_type": "registration",
					"total_amount": this.registrationFee,
					"department":this.doctorInfo.department,
					"token": confirmToken
				}).then(res => {
					if (res.statusCode === 200) {
						console.log(res)
						// /api/order/v1/pay  支付接口
						uni.$http.post('/order-server/api/order/v1/pay', {
							'out_trade_no': res.data.data.outTradeNo,
							'payAmount': this.registrationFee
						}).then(res => {
							console.log(res)
							this.getDetailTime()
							uni.navigateTo({
								url: '../pay/pay'
							})
						})

					}
				})
			},
			// 可预约和不可预约
			changeisRer() {
				let Rtext = []
				for (let item1 of this.time) {
					if (item1.isAppoint != '否') {
						Rtext.push('已预约')
					} else {
						if (item1.appointNum >= item1.nums) {
							Rtext.push('已约满')
						} else {
							Rtext.push('可预约')
						}
					}

				}
				this.isRegisted = Rtext
				// console.log(Rtext)
			},
			dateClick(item, index) {
				this.currentIndex = index
				this.time = this.doctorDetail.filter(arrItem => {
					return arrItem.date === item
				})
				this.changeisRer()
				this.currentDate = this.Rdate[index]
				// console.log(this.Rdate[index])
				// console.log(this.time)
			},
			isSelect(item, index) {
				let currentItem = this.time[index]
				if (item === '已约满') {
					uni.showToast({
						icon: 'error',
						title: '已约满'
					})
					return;
				} else if (item === '已预约' && currentItem.isAppoint === '是') {
					uni.showToast({
						icon: 'none',
						title: '你已预约'
					})
					return;
					// this.isRegisted.splice(index, 1, '可预约')
				} else if (item === '已预约' && currentItem.isAppoint === '否') {
					this.isRegisted.splice(index, 1, '可预约')
				} else {
					this.registerId = currentItem.id
					this.currentTime = currentItem.time
					// console.log(this.currentTime)
					this.isRegisted.splice(index, 1, '已预约')
				}
			},
			// 获取医生信息
			getDetailTime() {
				uni.$http.post(`/user-server/api/doctor/v1/doctor/register/${this.docotorId}`).then(res => {
					console.log(res)
					this.doctorDetail = res.data.data
					this.Rdate = [...new Set(this.doctorDetail.map(item => {
						return item.date
					}))]
					this.dateClick(this.Rdate[0], this.currentIndex)
					// console.log(this.doctorDetail)
					this.doctorInfo = uni.getStorageSync('doctor')
				})
			},
			getUserRegisted() {
				uni.$http.get('/order-server/api/order/v1/page?page=1&size=10').then(res => {
					// console.log(res.data.data.current_data)
					this.$store.commit('m_user/updateUserRegisted', res.data.data.current_data)
				})
			}


		}
	}
</script>

<style scoped lang="less">
	.container {
		// background: #6cc;
		height: calc(100vh - var(--status-bar-height) - 44px);
		overflow: hidden;

	}

	.rList {
		display: flex;
		height: 80rpx;

	}

	.rList view {
		flex: 1;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #47d669;
		border-right: #FFFFFF solid 1rpx;
		color: #FFFFFF;
	}

	.red {
		background-color: #ff875b !important;
	}

	.green {
		background-color: #33679b !important;
	}

	.hui {
		background-color: #4adf6d !important;
	}



	.container {
		padding: 20rpx;
	}

	.department {
		height: 250rpx;
		display: flex;
	}

	.department_img {
		width: 30%;
		height: 250rpx;
	}

	.department_img image {
		height: 250rpx;
		width: 100%;
	}

	.department_info {
		width: 70%;
		padding-left: 20rpx;
	}

	.department_name {
		// height: 50rpx;
		display: flex;
		color: #FFFFFF;

		.name {
			background-color: #00aaff;
			padding: 10rpx;
		}

		.experts {
			padding: 10rpx;
			background-color: #aaaa7f;
		}
	}

	.department_detail {
		border: solid 1rpx #ccc;
		height: 150rpx;
		border-radius: 6rpx;
	}

	.department_price {
		font-size: 40rpx;
		text-align: center;
	}

	.pick_date {
		padding: 20rpx;
		font-size: 40rpx;
		font-weight: 700;
	}

	.date {
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #00aaff;
	}

	.date_text {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		color: #FFFFFF;
	}

	.active {
		background-color: #a4b0be;
	}

	.registerd_submit {
		background-image: linear-gradient(90deg, rgb(92, 197, 241) 30%, rgb(0, 144, 201) 100%);
		width: 500rpx;
		text-align: center;
		padding: 20rpx 0;
		position: fixed;
		bottom: 10%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: #FFFFFF;
		border-radius: 50rpx;
		font-size: 50rpx;
	}

	.time {
		height: 100rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		background-color: #a4b0be;
	}

	.time_text {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		font-size: 31rpx;
		color: #FFFFFF;
		border-right: #ffffff 1px solid;
	}

	.time_text:last-child {
		border-right: none;
	}
</style>
